<template>
    <header class="custom-header van-hairline--bottom">
      <i v-if="!isback" class="nbicon nbfanhui" @click="goBack"></i>
      <i v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
      <div class="custom-header-name">{{ title }}</div>
      <i class="nbicon nbmore"></i>
    </header>
    <!-- 展位标签，用于相对/绝对定位时，撑开高度 -->
    <div class="block"></div>
  </template>
  
  <script>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  export default {
    props: {
      // title信息
      title: {
        type: String,
        default: ''
      },
      // 返回路径
      back: {
        type: String,
        default: ''
      },
      // 是否显示返回标签
      noback: {
        type: Boolean,
        default: false
      }
    },
    emits: ['callback'],    // 回调函数
    setup(props, ctx) {
      const isback = ref(props.noback)
      const router = useRouter()
      const goBack = () => {
        if(!props.back){
            // 没有返回路径的时候，默认返回一页
            router.go(-1)
        }else{
            // 有返回路劲的时候，直接跳转到返回的路径
            router.push({ path: props.back })
        }
        ctx.emit('callback')
      }

      return {
        goBack,
        isback
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
    @import '../theme/custom.less';
    .custom-header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      .fj();
      .wh(100%, 44px);
      line-height: 44px;
      padding: 0 10px;
      .boxSizing();
      color: #252525;
      background: #fff;
      .custom-header-name {
        font-size: 14px;
      }
    }
    .block{
        height: 44px;
    }
  </style>